<template>
  <l-dialog
    :title="$t('数据模型选择')"
    ref="formDialog"
    width="1000px"
    :height="640"
    :visible.sync="midVisible"
    :hasBtns="multiple"
    @close="closeDialog"
    @opened="handleOpened"
    @ok="okDialog"
  >
    <template v-if="!this.dbCode" #title>
      <span class="mr-8">{{ $t("数据模型选择") }}</span>
      <el-select size="mini" v-model="selectDbCode">
        <el-option-group
          v-for="group in lr_dblinkTree"
          :key="group.id"
          :label="group.label"
        >
          <el-option
            v-for="item in group.children"
            :key="item.id"
            :label="item.label"
            :value="item.id"
          >
          </el-option>
        </el-option-group>
      </el-select>
    </template>

    <l-select-panel
      style="padding:8px;"
      ref="selectPanel"
      :isRefresh="true"
      :columns="columns"
      :isPage="true"
      :loadSelectTable="loadSelectTable"
      :refreshData="refreshData"
      :multiple="multiple"
      valueKey="f_TableName"
      isSaveSelectData
      @rowClick="handleRowClick"
    >
      <template #btns>
        <el-button-group>
          <el-button size="mini" @click="handleOpenImport">
            导入表
          </el-button>
        </el-button-group>
      </template>
      <template v-slot:f_State="scope">
        <el-tag v-if="scope.row.f_State == 1" size="mini" type="success"
          >同步</el-tag
        >
        <el-tag v-else size="mini" type="danger">未同步</el-tag>
      </template>
      <l-table-btns
        :btns="tableBtns"
        :isFixed="false"
        @click="lr_handleTableBtnClick"
      >
      </l-table-btns>
    </l-select-panel>

    <l-dbtable-selectdialog
      :visible.sync="dbTableVisible"
      :dbCode="this.settingDbCode"
      :isOkClose="false"
      @select="dbTableSelect"
    >
    </l-dbtable-selectdialog>
  </l-dialog>
</template>
<script>
const api = window.$api.data.codeTable;
export default {
  name: "l-codetable-selectdialog",
  props: {
    visible: {
      type: Boolean,
    },
    dbCode: String,
    multiple: {
      type: Boolean,
      default: true,
    },
    isOkClose: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      columns: [
        { label: "表名", prop: "f_TableName", minWidth: 200 },
        { label: "备注", prop: "f_Description", minWidth: 200 },
        { label: "状态", prop: "f_State", width: 80, align: "center" },
      ],
      dbTableVisible: false,

      tableBtns: [{ prop: "UpdateTable", label: "更新" }],

      selectDbCode: "lrsystemdb",
    };
  },
  created() {
    if (!this.dbCode) {
      this.initData();
    }
  },
  mounted() {},
  computed: {
    midVisible: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit("update:visible", val);
      },
    },
    settingDbCode() {
      if (this.dbCode) {
        return this.dbCode;
      } else {
        return this.selectDbCode;
      }
    },
  },
  methods: {
    initData() {
      this.lr_loadDblink();
    },
    refreshData() {
      this.$refs.selectPanel.init();
    },
    async loadSelectTable(queryData) {
      queryData.keyWord = queryData.keyword;
      queryData.sidx = "F_TableName DESC";
      queryData.dbCode = this.settingDbCode;
      const res = await this.$awaitWraper(api.getPage(queryData));
      if (res) {
        return res;
      } else {
        return { rows: [], records: 0 };
      }
    },
    closeDialog() {
      this.$refs.selectPanel.handleClear();
    },
    handleOpened() {
      this.$refs.selectPanel.init();
    },
    loadData() {
      this.$refs.selectPanel.init();
    },
    async okDialog(showLoading, hideLoading) {
      let select =  await this.$refs.selectPanel.getSelected();
      this.$emit("select", select, showLoading, hideLoading,this.settingDbCode);
      if (this.isOkClose) {
        this.midVisible = false;
      }
    },
    async handleRowClick() {
      if (!this.multiple) {
        let select =  await this.$refs.selectPanel.getSelected();
        this.$emit(
          "select",
          select,
          this.$refs.formDialog.showLoading,
          this.$refs.formDialog.hideLoading,
          this.settingDbCode
        );
        if (this.isOkClose) {
          this.midVisible = false;
        }
      }
    },
    handleOpenImport() {
      this.dbTableVisible = true;
    },
    async dbTableSelect(list, showLoading, hideLoading) {
      showLoading();
      if (list.length == 0) {
        this.$message({
          type: "warning",
          message: "请选择一条数据!",
        });
        hideLoading();
      }
      const postData = {
        tableList: list,
      };

      const data = await this.$awaitWraper(
        api.importTable(this.settingDbCode, postData)
      );
      if (data) {
        this.$message({
          type: "success",
          message: this.$t("导入成功!"),
        });
        this.$refs.selectPanel.init();
        this.dbTableVisible = false;
      }
      hideLoading();
    },
    async handleUpdateTable($index, row) {
      this.$refs.formDialog.showLoading("更新中...");
      const postData = {
        tableList: [
          {
            name: row.f_TableName,
            description: row.f_Description,
          },
        ],
      };
      const data = await this.$awaitWraper(
        api.importTable(this.settingDbCode, postData)
      );
      if (data) {
        this.$message({
          type: "success",
          message: this.$t("更新成功!"),
        });
        this.$refs.selectPanel.init();
      }
      this.$refs.formDialog.hideLoading();
    },
  },
};
</script>
